<script>
import { mapGetters } from 'vuex'
import { getUserInfo, updateUserInfo } from '@/api/user'

export default {
  data() {
    return {
      userData: {}, // 用户信息
      messageData: {
        id: '',
        username: '',
        nickname: '',
        sex: '',
        email: '',
        phone: ''
      },
      sexList: [
        {
          value: '0',
          label: '女'
        }, {
          value: '1',
          label: '男'
        }
      ],
      messageRules: {
        username: [
          {
            required: true,
            min: 2,
            max: 10,
            message: '用户名为2-10位',
            trigger: 'blur'
          }
        ],
        nickname: [
          {
            min: 2,
            max: 10,
            message: '昵称为2-10位',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            min: 11,
            max: 11,
            message: '手机号应为11位',
            trigger: 'blur'
          }
        ],
        email: [
          {
            required: true, type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'userInfo',
      'username',
      'nickname'
    ]),
    displaySex: {
      get() {
        // 根据userData.sex的值返回"男"或"女"
        return this.userData.sex === '1' ? '男' : '女'
      },
      set(value) {
        // 当输入框的值改变时，更新userData.sex
        this.userData.sex = value === '男' ? 1 : 0
      }
    }
  },
  mounted() {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo() {
      const res = await getUserInfo()
      this.userData = res
      console.log('用户信息', this.userData)
    },
    submitMes() {
      this.messageData.id = this.userData.id
      this.messageData.username = this.userData.username
      this.messageData.nickname = this.userData.nickname
      this.messageData.sex = this.userData.sex
      this.messageData.email = this.userData.email
      this.messageData.phone = this.userData.phone
      this.$confirm('是否修改?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        this.$refs.formDateRef.validate(async isok => {
          if (isok) {
            await updateUserInfo(this.messageData)
            console.log('修改', this.messageData)
            this.$message({
              type: 'success',
              message: '修改成功!'
            })
          }
        })
      })
    }
  }
}
</script>
<template>
  <div class="box-card">
    <el-row type="flex" justify="center">
      <el-form ref="formDateRef" label-position="top" label-width="80px" :model="userData" :rules="messageRules" style="width: 60%;">
        <el-row type="flex" justify="space-between">
          <el-col :span="8">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="userData.username" style="min-width: 200px;" />
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
              <el-input v-model="userData.nickname" style="min-width: 200px;" />
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-select v-model="userData.sex" placeholder="请选择性别" style="width: 100%">
                <el-option v-for="option in sexList" :key="option.value" :label="option.label" :value="option.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="userData.phone" style="min-width: 200px;" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="userData.email" style="min-width: 200px;" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <el-row type="flex" justify="center">
      <el-button type="primary" plain @click="submitMes">确认修改</el-button>
    </el-row>
  </div>
</template>
<style scoped lang='scss'>
.second-box-card {
  margin-bottom: 10px;

  .box-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
</style>
